<template>
  <div class="container bg-gray">
    <div class="pp1 border-b">
      <div class="flex">
        <div class="search-input-area">
          <input type="search" @focus="showSearchHistories" @blur="searchmode=false" @keyup.enter="doSearch" v-model="words" class="search-input"
            placeholder="搜索关键字">
        </div>
        <div class="search-bth" @click="doSearch">搜索</div>
      </div>
    </div>
    <div class="pp1-holder"></div>
    <template v-show="searchmode">
      <div class="history-area fz22" v-if="histories && histories.length">
        <div class="flex">
          <div class="flex-con txt333">
            最近搜索
          </div>
          <div class="clearbtn">
            清空
          </div>
        </div>
        <div class="search-history clearfix">
          <div class="search-item" v-for="item in histories" :key="item">{{item}}</div>
        </div>
      </div>
    </template>
    <div class="goods-list" v-show="!searchmode">
      <xd-datalist ref="datalist" url="/api/api_oil_station/list" :autoload="false">
         <template slot-scope="scope">
        <div class="list-item" v-for="item in scope.list" :key="item.id">
          <div class="border-b p1">
            <div class="flex">
              <img :src="item.image|absUrl" alt="" class="oil-img">
              <div class="flex-con oil-info">
                <div class="oil-title">
                  {{item.name}}
                </div>
                <div class="flex">
                  <img src="../../assets/icons/loc@2x.png" alt="" class="loc-icon">
                  <div class="flex-con one-line fz24 txt666">
                    {{item.addr}}
                  </div>
                </div>
              </div>
              <a :href="'tel:'+ item.phone" class="phone-icon-wrap">
                <img src="../../assets/icons/phone@2x.png"  alt="" class="phone-icon">
              </a>
              
            </div>
          </div>
          <div class="p1 clearfix" v-if="item.selfPay||item.tags">
            <div class="tag tag1" v-if="item.tags && item.tags.indexOf('优途')!=-1">优途站</div>
            <div class="tag tag2" v-if="item.tags && item.tags.indexOf('WIFI')!=-1">免费WiFi</div>
            <div class="tag tag3" v-if="item.selfPay">自助支付</div>
          </div>
        </div>
      </template>

      </xd-datalist>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      histories: [],
      words: "",
      list: [{}, {}],
      searchmode: false
    };
  },
  created() {},
  methods: {
    doSearch() {
      this.$refs.datalist.addParam("title", this.words.trim()).refresh();
      this.searchmode = false;
    },
    showSearchHistories() {
      this.searchmode = true;
    },
    showGoodsDetail(id) {
      this.$router.push("/goodsdetail?id=" + id);
    }
  }
};
</script>

<style lang="scss" scoped>
.empty-area {
  font-size: 0.3467rem;
  padding-top: 1.3067rem;
  color: #333333;
  text-align: center;
  .empty-img {
    width: 3rem;
    height: 2rem;
  }
  .empty-txt {
    margin-top: 0.68rem;
  }
}

.pp1 {
  padding: 0.3733rem 0.4267rem;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: #fff;
  .search-input-area {
    width: 7.7067rem;
    .search-input {
      width: 7.3333rem;
      display: block;
      height: 0.8533rem;
      line-height: 0.8533rem;
      background-color: #ebebeb;
      border-radius: 0.4267rem;
    }
  }
}

.pp1-holder {
  height: 1.5733rem;
}

.history-area {
  background-color: #fff;
  padding: 0.3333rem 0.4rem 0.2rem 0.4rem;
}

.clearbtn {
  color: #e82f24;
}

.search-history {
  padding-top: 0.36rem;
  font-size: 0.32rem;
  color: #333333;

  .search-item {
    float: left;
    height: 0.7733rem;
    line-height: 0.7733rem;
    background-color: #e5e5e5;
    margin-bottom: 0.2533rem;
    border-radius: 0.0533rem;
    padding: 0 0.2667rem;
    margin-right: 0.28rem;
  }
}

.search-input {
  font-size: 0.2933rem;
  border: none;
  -webkit-appearance: none;
  outline: none;
  background-position: 0.3867rem 0.2933rem;
  background-image: url("../../assets/icons/shop/searchicon@2x.png");
  background-size: 0.32rem 0.32rem;
  background-repeat: no-repeat;
  padding-left: 0.8rem;
  padding-right: 0.4rem;
  &::-webkit-input-placeholder {
    color: #b2b2b2;
  }
}

.search-bth {
  font-size: 0.3733rem;
  width: 1.4667rem;
  height: 0.8533rem;
  line-height: 0.8533rem;
  border-radius: 7px;
  background-image: url("../../assets/icons/shop/searchbtn@2x.png");
  background-size: contain;
  background-repeat: no-repeat;
  color: white;
  text-align: center;
}

.list-item {
  background-color: #fff;
  margin-bottom: 0.24rem;
}

.p1 {
  padding: 0.3467rem 0.4rem;
}

.oil-img {
  width: 3.32rem;
  height: 1.8533rem;
}

.oil-info {
  padding-left: 0.2933rem;
}

.oil-title {
  font-size: 0.3467rem;
  color: #333;
  padding-bottom: 0.5067rem;
}

.loc-icon {
  width: 0.32rem;
  height: 0.44rem;
  margin-right: 0.2533rem;
}

.phone-icon {
  width: 0.64rem;
  display: block;
  height: 0.6267rem;
}

.tag {
  font-size: 0.2667rem;
  height: 0.52rem;
  line-height: 0.52rem;
  border-radius: 0.08rem;
  float: left;
  text-align: center;
  margin-right: 0.2533rem;
  min-width: 1.2rem;
  padding: 0 0.2133rem;
}

.tag1 {
  border: solid 1px #c4eec3;
  background-color: #e3fbe2;
  color: #019b00;
}

.tag2 {
  background-color: #fbf1da;
  border: solid 1px #eedcc3;
  color: #fe8611;
}

.tag3 {
  background-color: #fbe9e9;
  border: solid 1px #eec3c3;
  color: #f02320;
}
</style>
